<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DIV+CSS+JS仿下拉表单</title>
  <script type="text/javascript" >
    function $$$$$(_sId){
      return document.getElementById(_sId);
    }
    function hide(_sId)
    {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
    function pick(v) {
      document.getElementById('am').value=v;
      hide('HMF-1')
    }
    function bgcolor(id){
      document.getElementById(id).style.background="#F7FFFA";
      document.getElementById(id).style.color="#000";
    }
    function nocolor(id){
      document.getElementById(id).style.background="";
      document.getElementById(id).style.color="#788F72";
    }
  </script>
  <style type="text/css">
    * {
      margin:0px;
      padding:0px;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    .cur {
      cursor:pointer;
      display:block;
      color:#788F72;
      width:71px;
      height:22px;
      line-height:22px;
      padding:0px 0px 0px 2px;
    }
    .am {
      border: 0px;
      color:#788F72;
      cursor: pointer;
      background: url(icon_111.jpg) no-repeat center center;
      border:1px #ccc solid;
      display:block;
      cursor:pointer;
      width:73px;
      height: 19px;
      margin:10px 0px 0px 10px;
      padding:3px 0px 0px 2px;
    }
    .bm {
      border: 1px #999999 solid;
      width:73px;
      margin-left:10px;
    }
  </style>
</head>
<body>
<form>
  <input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
  <div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span> <span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span> <span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span> <span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span> <span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span> <span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span> </div>
</form>
</body>
</html>